<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>瀑布流懒加载</title>
    <style>
      html,
      body {
        height: 100%;
      }
      .container {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
      }
      .item {
        position: absolute;
        width: 200px;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #333;
        border-radius: 5px;
      }
      .item img {
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script>
      ;(function() {
        // 图片数组
        var _IMGS = []
        // 我准备了30张图片
        for (var i = 0; i < 30; i++) {
          _IMGS.push('./img/' + (i + 1) + '.jpg')
        }
        // 图片容器宽度，与css中.item相同
        var _IMGWIDTH = 200
        // 图片之间的间距
        var _MARGIN = 10
        // 一行显示的图片数量, 列数
        var _COL = 5
        // 一次显示多少图片
        var _NUMS = 20
        // 加载次数
        var load = 0

        // 最下面一行底边的top left
        var itemPositionsTop = []
        var itemPositionsLeft = []
        // 容器
        var oCont = document.querySelector('.container')

        // 获取当前要显示的图片路径数组
        function getShowImgArr() {
          var index = 0
          var arr = []
          _IMGS.sort(function() {
            return 0.5 - Math.random()
          })
          for (var i = 0; i < _NUMS; i++) {
            arr.push(_IMGS[index])
            index++
            if (index >= _IMGS.length) {
              index = 0
            }
          }
          return arr
        }
        // 将所有图片插入
        function addImgItem(imgs) {
          for (var i = 0; i < imgs.length; i++) {
            var item = document.createElement('div')
            item.className = 'item'
            item.innerHTML = '<img src="' + imgs[i] + '">'
            oCont.appendChild(item)
          }
        }

        // 获取第一行的top left
        function getFirstTopLeft() {
          // 除去图片后两边剩下的间距
          var leftMargin =
            (oCont.clientWidth - (_COL * _IMGWIDTH + _MARGIN * (_COL - 1))) / 2
          for (var i = 0; i < _COL; i++) {
            itemPositionsLeft.push(
              leftMargin + i * _IMGWIDTH + (i - 1) * _MARGIN
            )
            itemPositionsTop.push(0)
          }
        }
        getFirstTopLeft()

        // 得到top最小的位置的index
        function getMinTopIndex() {
          var minIndex = 0
          for (var i = 1; i < itemPositionsTop.length; i++) {
            if (itemPositionsTop[i] < itemPositionsTop[minIndex]) {
              minIndex = i
            }
          }
          return minIndex
        }
        // 设置一张图片的位置
        function setImg(oImgItem) {
          var minIndex = getMinTopIndex()
          oImgItem.style.left = itemPositionsLeft[minIndex] + 'px'
          oImgItem.style.top = itemPositionsTop[minIndex] + 'px'
          itemPositionsTop[minIndex] =
            itemPositionsTop[minIndex] + 10 + oImgItem.clientHeight
        }

        // 加载图片
        function loadImgs() {
          addImgItem(getShowImgArr())
          // 获取图片item容器
          var oImgItems = document.querySelectorAll('.item')
          oImgItems = Array.prototype.slice.call(oImgItems, load * _NUMS)
          load++
          var loaded = 0
          function loadOne() {
            console.log(loaded)
            if (loaded == oImgItems.length) return
            // 判断图片是否加载完成
            if (oImgItems[loaded].children[0].complete) {
              setImg(oImgItems[loaded])
              loaded++
              loadOne()
            } else {
              setTimeout(loadOne, 50)
            }
          }
          loadOne()
        }

        // 加载一次图片
        loadImgs()

        var timer = null
        // 懒加载
        window.onscroll = function() {
          if (document.body.scrollHeight == document.body.clientHeight) return
          if (
            document.body.clientHeight + window.scrollY + 50 >=
            document.body.scrollHeight
          ) {
            clearTimeout(timer)
            timer = setTimeout(loadImgs, 300)
          }
        }
      })()
    </script>
  </body>
</html>
